<template>
  <div class="toolbar">
    <div class="time-axis">
      <table>
        <tr>
          <td @click="clickYear(year)" v-for="year in yearlist"><b>{{year}}</b></td>
        </tr>
      </table>
    </div>
    <!-- <b style="position:absolute;left:230px;top:5px;font-size:20px;">{{ value }}</b></br> -->
    <i-Button size="large" shape="circle" :icon="icon" @click="onClick" class="play"></i-Button>
    <Slider class="slider" :value.sync="value" :min="minYear" :max="maxYear" :step="yearInterval" show-stops></Slider>
  </div>
</template>


<script>
export default {
  attached (){
    this.minYear = config.minYear;
    this.yearInterval = config.yearInterval;
    var n = this.minYear;
    while (n<=this.maxYear){
      this.yearlist.push(n);
      n += this.yearInterval;
    }
    this.maxYear = this.yearlist[this.yearlist.length-1];
  },
  data () {
    return {
      minYear:2011,
      maxYear:2015,
      yearInterval:1,
      yearlist:[],
      icon: 'play'
    }
  },

  computed: {
    value: {
      get () {
        return this.$store.state.year
      },

      set (newValue) {
        this.$store.commit('changeYear', {year: newValue})
      }
    }
  },

  methods: {
    onClick () {
      this.icon = this.icon === 'play' ? 'pause' : 'play'
      const animate = () => {
        if (this.icon === 'play') return
        var diff = this.yearlist[this.yearlist.length-1]+this.yearInterval-this.minYear;
        this.value = (this.value + this.yearInterval - this.minYear) % diff + this.minYear
        setTimeout(animate, 3500)
      }

      setTimeout(animate, 1000)
    },
    clickYear (y) {
      this.value = y;
    }
  }
}
</script>


<style scoped>
.toolbar {
  width: 530px;
  height: 50px;
  padding: 2px 10px 2px 10px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8);
}

h1 {
  text-align: center;
}

.slider {
  display: inline-block;
  vertical-align: middle;
  width: 430px;
  margin-left: 5px;
}

.time-axis{
  width: 536px;
  margin-left: 5px;
  position: absolute;
  top: 20px;
}

.time-axis table{
  width: 100%;
  font-size: 16px;
  text-align: center;
}

.play{
  margin-right: 15px;
  position: relative;
  top: 5px;
}

.time-axis table td{
  cursor: pointer;
}
</style>
